<template>
    <div class="home" style="padding: 10px;">
    <a-row style="height: 100%;" :gutter="10">
      <a-col :span="7" style="height: 100%;">
        <div class="all">
          <div id="grid-M1" style="height: 290px;">
             <a-card>
                <span slot="title">
                  <a-icon type="table"/>
                  <span style="margin-left:10px;">结果分析</span>
                </span>
<div >
  <table class="table">
          <tbody>
            
            <tr>
              <td>数据汇总时间</td>
              <td colspan="3" style="color: #ff9933;font-weight: 600;">{{currenttime}}</td>
            </tr>
            <tr>
              <td>主要污染物</td>
              <td colspan="3" style="color: #ff9933;font-weight: 600;">{{mainpullotion}}</td>
            </tr>
            <tr>
              <td>污染物来源</td>
              <td colspan="3" style="color: #ff9933;font-weight: 600;">企业排放</td>
            </tr>
            <tr>
              <td>重度污染面积</td>
              <td style="color: #ff9933;font-weight: 600;">12 K㎡</td>
             <td>相关企业</td>
              <td style="font-weight: 600;"><a href="#" >15个</a></td>
            </tr>
            <tr>
              <td>疑似火点</td>
              <td style="font-weight: 600;"><a href="#" >1处</a></td>
             <td>采矿企业</td>
              <td style="font-weight: 600;"><a href="#" >3家</a></td>
            </tr>
          </tbody>
        </table>  
</div> 
                </a-card>
          </div>
          

        </div>
        <div class="all" style="margin-top: 10px;">
<div id="grid-L2" style="height: 300px;">
          </div>
        </div>
        <div class="all" style="margin-top: 10px;">
          <div style="text-align: center;
    padding: 5px;
">
      <a-radio-group>
        <a-radio-button value="name">
          数据关系图
        </a-radio-button>
        
      </a-radio-group>
    </div>
<div id="grid-L3" style="height: 305px;">
          </div>
          
        </div>
      </a-col>
      <a-col :span="10" style="height: 100%;">
        <div class="all" >
         
          <div id="map" style="height: 605px;position: relative;">
            <div
              style="padding: 6px;position: absolute;z-index: 2;background-color:rgba(18, 37, 79, 0.45);;text-align: center;border-radius: 8px;color: #ffffff;font-size: 16px;left: 0;right: 0;margin: 0 auto;"
            > <div>
      <a-radio-group v-model="currentzhibiao" @change="onZhibiaoChange">
        <a-radio-button value="PM2.5">
          PM2.5
        </a-radio-button>
        <a-radio-button value="PM10">
          PM10
        </a-radio-button>
        
      </a-radio-group>
    </div>{{mapTitle}}</div>
<div style="
    width: 180px;
    position: absolute;
    bottom: 5px;
    right: 1px;
    z-index: 100;
    border: solid 1px #9999ff;
    background-color: rgba(0, 0, 0, 0.45);
   
">
<a-card size="small" title="图例" :bodyStyle="bodyStyle">
  <a-row v-for="item in lengedData"  v-bind:key="item.name">
  <a-col style="
    text-align: center;
" :span="12"><a-tag v-bind:style ="{ 'background-color': item.color,'width':'40px','height':'20px'}"></a-tag></a-col>
  <a-col style="
    text-align: center;
" :span="12"><div class="grid-content ">{{item.name}}</div></a-col>
 
</a-row>
 
  </a-card>
</div>
          </div>
              
        </div>
        <div class="all" style="margin-top: 10px;">
        <div id="grid-L1" style="height:305px;"></div>
     <div style="text-align: center;
    padding: 5px;
">
      <a-radio-group v-model="year" @change="onYearChange">
        <a-radio-button value="2015">
          2015年
        </a-radio-button>
        <a-radio-button value="2016">
          2016年
        </a-radio-button>
        <a-radio-button value="2017">
          2017年
        </a-radio-button>
        <a-radio-button value="2018">
          2018年
        </a-radio-button>
        <a-radio-button value="2019">
          2019年
        </a-radio-button>
        <a-radio-button value="2020">
          2020年
        </a-radio-button>
      </a-radio-group>
    </div>
        </div>
      </a-col>
      <a-col :span="7" style="height: 100%;">
       
        <div class="all">
           <div id="grid-R1" style="height: 210px;padding-top: 10px;"></div>
        </div>
        <div class="all" style="margin-top:10px">
          <div id="grid-R2" style="height: 380px;width: 100%;"></div>
        </div>
        <div class="all" style="margin-top:10px">
          <div id="grid-R3" style="height: 350px;width: 100%;"></div>
        </div>
      </a-col>
    </a-row>
  </div>
</template>
<script>
import * as mapOper from '../../scripts/mapOper.js';
let config = require('../../config/config');
import commonOper from '../../scripts/commonOper';
var _ = require('lodash');
export default {
  name: 'Home',
  data() {
    return {
      map: null,
      currenttime:'',
      mapTitle:'',
      currentzhibiao:'PM2.5',
      year:'2020',
      lengedData:[],
      mainpullotion:'颗粒物(PM10)',
      bodyStyle:{padding: '4px'},
      
      localAqiData:[],
      M1Chart:null,
      M1ChartOption:{
        tooltip: {
          show: false
        },
        animationDurationUpdate: 1500,
        animationEasingUpdate: 'quinticInOut',
        series: [{
          type: 'graph',
          layout: 'force', // circular | force | none
          circular: {
            rotateLabel: true
          },
          force: {
            repulsion: [60,70], //斥力,值越大则斥力越大
            gravity: 0, //重力
            edgeLength: [60, 50],
            layoutAnimation: true, //默认动态为true
          },
          symbol: 'roundRect', // 节点标记类型
          symbolSize: 70,
          focusNodeAdjacency: true, // 鼠标经过节点是否突出显示
          edgeSymbol: ['circle', 'none'],
          edgeSymbolSize: [0, 0],
          edgeLabel: {
            show: false
          },
          roam: true, // 是否开启鼠标平移
          draggable: true, // 节点是否可拖拽
          label: {
            normal: {
              show: true,
              position: 'inside',
              textStyle: {
                fontSize: 12,
                color: '#54f7ff'
              },
            }
          },
          lineStyle: {
            normal: {
              opacity: .7,
              color: '#54f7ff',
              width: 2,
              curveness: 0
            }
          },
          itemStyle: {
            opacity: .7,
            normal: {
              color: {
                type: 'radial',
                r: 0.9,
                colorStops: [{
                  offset: 0,
                  color: '#0c1746'
                }, {
                  offset: 1,
                  color: '#54f7ff'
                }]
              },
              borderColor: '#54f7ff',
              borderWidth: 1
            }
          },
          categories: [{ // 节点分类
            name: 'root',
            label: {
              formatter: '{b}',
              fontSize: 14,
              color: '#ffec19'
            },
            itemStyle: {
              color: {
                type: 'radial',
                r: 0.9,
                colorStops: [{
                  offset: 0,
                  color: '#0c1746'
                }, {
                  offset: 1,
                  color: '#ffec19'
                }]
              },
              borderColor: '#ffec19',
              borderWidth: 1
            }
          }, {
            name: 'child',
            label: {
              formatter: '{b}',
              fontSize: 12,
              color: '#54f7ff'
            },
            itemStyle: {
              color: {
                type: 'radial',
                r: 0.9,
                colorStops: [{
                  offset: 0,
                  color: '#0c1746'
                }, {
                  offset: 1,
                  color: '#54f7ff'
                }]
              },
              borderColor: '#54f7ff',
              borderWidth: 1
            }
          }, {
            name: 'grandson',
            label: {
              formatter: '{c}',
              fontSize: 12,
              color: '#ffffff'
            },
            itemStyle: {
              color: {
                type: 'radial',
                r: 0.9,
                colorStops: [{
                  offset: 0,
                  color: '#0c1746'
                }, {
                  offset: 1,
                  color: '#fa704d'
                }]
              },
              borderColor: '#fa704d',
              borderWidth: 1
            }
          }],
          data: [], // 数据
          links: [{ // 节点间关系数据 - 数字表示源节点的索引
            source: 0,
            target: 1
          }, {
            source: 0,
            target: 2
          }, {
            source: 0,
            target: 3
          }, {
            source: 0,
            target: 4
          }, {
            source: 0,
            target: 5
          }, {
            source: 1,
            target: 6

          }, {
            source: 1,
            target: 7
          }, {
            source: 1,
            target: 8

          }, {
            source: 5,
            target: 9
          }, {
            source: 5,
            target: 10
          }, {
            source: 5,
            target: 11
          }, {
            source: 2,
            target: 12
          }, {
            source: 3,
            target: 13
          }, {
            source: 4,
            target: 14
          }, {
            source: 4,
            target: 15
          }, {
            source: 0,
            target: 16
          }, {
            source: 16,
            target: 17
          }, {
            source: 0,
            target: 18
          }, {
            source: 0,
            target: 19
          }, {
            source: 1,
            target: 20,
            lineStyle: {
              normal: {
                color: '#69a1ff'
              }
            }
          }, {
            source: 2,
            target: 21,
            lineStyle: {
              normal: {
                color: '#69a1ff'
              }
            }
          }, {
            source: 3,
            target: 22,
            lineStyle: {
              normal: {
                color: '#69a1ff'
              }
            }
          }, {
            source: 4,
            target: 23,
            lineStyle: {
              normal: {
                color: '#69a1ff'
              }
            }
          }, {
            source: 5,
            target: 24,
            lineStyle: {
              normal: {
                color: '#69a1ff'
              }
            }
          }, {
            source: 6,
            target: 25,
            lineStyle: {
              normal: {
                color: '#69a1ff'
              }
            }
          }, {
            source: 7,
            target: 26,
            lineStyle: {
              normal: {
                color: '#69a1ff'
              }
            }
          }, {
            source: 8,
            target: 27,
            lineStyle: {
              normal: {
                color: '#69a1ff'
              }
            }
          }, {
            source: 9,
            target: 28,
            lineStyle: {
              normal: {
                color: '#69a1ff'
              }
            }
          }, {
            source: 10,
            target: 29,
            lineStyle: {
              normal: {
                color: '#69a1ff'
              }
            }
          }, {
            source: 11,
            target: 30,
            lineStyle: {
              normal: {
                color: '#69a1ff'
              }
            }
          }, {
            source: 12,
            target: 31,
            lineStyle: {
              normal: {
                color: '#69a1ff'
              }
            }
          }, {
            source: 13,
            target: 32,
            lineStyle: {
              normal: {
                color: '#69a1ff'
              }
            }
          }, {
            source: 14,
            target: 33,
            lineStyle: {
              normal: {
                color: '#69a1ff'
              }
            }
          }, {
            source: 15,
            target: 34
          }, {
            source: 16,
            target: 35,
            lineStyle: {
              normal: {
                color: '#69a1ff'
              }
            }
          }, {
            source: 17,
            target: 36,
            lineStyle: {
              normal: {
                color: '#69a1ff'
              }
            }
          }, {
            source: 18,
            target: 37,
            lineStyle: {
              normal: {
                color: '#69a1ff'
              }
            }
          }, {
            source: 19,
            target: 38,
            lineStyle: {
              normal: {
                color: '#69a1ff'
              }
            }

          }]
        }]
      },
      L1Chart: null,
      L1ChartOption: {
        title: {
          text: '乌海市季节与污染天数统计',
          x: 'center',
          y:'10',
          textStyle: {
            color: '#ffffff'
          }
        },
        grid: {
          top: '25%',
          bottom: '10%',
          right:'10%',
          left:'10%'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
            label: {
              show: true
            }
          }
        },
        legend: {
          data: ['排放量','轻度', '中度', '重度','严重' ],
          top: '15%',
          textStyle: {
            color: '#ffffff'
          }
        },
        xAxis: {
          data: ['春季（3-5月）','夏季（6-8月）','秋季（9-11月）','冬季（12-2月）'],
          axisLine: {
            show: false //隐藏X轴轴线
          },
          axisTick: {
            show: false //隐藏X轴刻度
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#ebf8ac' //X轴文字颜色
            }
          }
        },
        yAxis: [
          {
            type: 'value',
            name: '天',
            nameTextStyle: {
              color: '#ebf8ac'
            },
            splitLine: {
              show: false
            },

            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisLabel: {
              show: true,
              formatter: '{value}天',
              textStyle: {
                color: '#ebf8ac'
              }
            }
          },
          {
            type: 'value',
            name: '企业排放量',
            nameTextStyle: {
              color: '#ebf8ac'
            },
            position: 'right',

            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisLabel: {
              show: true,
              formatter: '{value} ', //右侧Y轴文字显示
              textStyle: {
                color: '#ebf8ac'
              }
            }
          },
          {
            type: 'value',
            gridIndex: 0,
            min: 50,
            max: 100,
            splitNumber: 8,
            splitLine: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false
            },
            splitArea: {
              show: true,
              areaStyle: {
                color: ['rgba(250,250,250,0.0)', 'rgba(250,250,250,0.05)']
              }
            }
          }
        ],
        series: [
          {
            name: '排放量',
            type: 'line',
            yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
            smooth: true, //平滑曲线显示
            showAllSymbol: true, //显示所有图形。
            symbol: 'circle', //标记的图形为实心圆
            symbolSize: 10, //标记的大小
            itemStyle: {
              //折线拐点标志的样式
              color: '#cc0033'
            },
            lineStyle: {
              color: '#cc0033'
            },
            areaStyle: {
              color: 'rgba(5,140,255, 0.2)'
            },
            data: [20,45,67,78]
          },
          {
            name: '轻度',
            type: 'bar',
            barWidth: '15%',
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#aecb56'
                  },
                  {
                    offset: 1,
                    color: '#aecb56'
                  }
                ]),
                barBorderRadius: 12
              }
            },
            data: [1,2,3,4]
          },
          {
            name: '中度',
            type: 'bar',
            barWidth: '15%',
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#0092f6'
                  },
                  {
                    offset: 1,
                    color: '#0092f6'
                  }
                ]),
                barBorderRadius: 11
              }
            },
            data: [5,6,7,8]
          },
          {
            name: '重度',
            type: 'bar',
            barWidth: '15%',
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#fa704d'
                  },
                  {
                    offset: 1,
                    color: '#fa704d'
                  }
                ]),
                barBorderRadius: 11
              }
            },
            data: [9,10,11,13,14]
          },
          {
            name: '严重',
            type: 'bar',
            barWidth: '15%',
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#7049f0'
                  },
                  {
                    offset: 1,
                    color: '#7049f0'
                  }
                ]),
                barBorderRadius: 11
              }
            },
            data: [9,10,11,13,14]
          }
        ]
      },
      L2Chart: null,
      L2ChartOption: {
        //backgroundColor: '#062D87',
        title: {
          text: '遥感监测-高热面积与热红外面积变化监测',
          x: 'center',
          textStyle: {
            color: '#ffffff'
          }
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          x: 'center',
          y: '40px',
          data: ['高热面积', '热红外面积'],
          textStyle: {
            color: '#fff'
          }
        },
        grid: {
          // top: 'middle',
          left: '3%',
          right: '4%',
          //bottom: '3%',
          // height: '80%',
          containLabel: true
        },
        dataZoom: [
          {
            type: 'slider',
            show: true,
            height: 12,
            left: '10%',
            right: '10%',
            bottom: '2%',
            start: 50,
            end: 100,
            textStyle: {
              color: '#d4ffff',
              fontSize: 11
            }
          },
          {
            type: 'inside'
          }
        ],
        calculable: true,
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: [],
            axisTick: {
              show: true //隐藏X轴刻度
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#ebf8ac' //X轴文字颜色
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: 'K㎡',
            nameTextStyle: {
              color: '#ebf8ac'
            },
            axisLabel: {
              formatter: '{value}K㎡',
              textStyle: {
                color: '#ebf8ac'
              }
            },
            // axisLabel: {
            //   show: true,
            //   textStyle: {
            //     color: '#ebf8ac'
            //   }
            // },
            splitLine: {
              lineStyle: {
                type: 'dashed',
                color: '#DDD'
              }
            }
          }
        ],
        series: [
          {
            name: '高热面积',
            type: 'line',
            data: [],
            // markPoint : {
            //   data : [
            //     {name : '周最低', value : 22, xAxis: 1, yAxis: 22}
            //   ]
            // },
            lineStyle: {
              normal: {
                width: 3,
                color: {
                  type: 'linear',

                  colorStops: [
                    {
                      offset: 0,
                      color: '#F6D06F' // 0% 处的颜色
                    },
                    {
                      offset: 0.4,
                      color: '#F9A589' // 100% 处的颜色
                    },
                    {
                      offset: 1,
                      color: '#F9A589' // 100% 处的颜色
                    }
                  ],
                  globalCoord: false // 缺省为 false
                },
                shadowColor: 'rgba(249,165,137, 0.5)',
                shadowBlur: 5,
                shadowOffsetY: 3
              }
            },
            itemStyle: {
              normal: {
                color: '#F6D06F',
                borderWidth: 5,
                /*shadowColor: 'rgba(72,216,191, 0.3)',
                     shadowBlur: 100,*/
                borderColor: '#F6D06F'
              }
            },
            smooth: true,
            markLine: {
              data: [{ type: 'average', name: '平均值' }]
            }
          },
          {
            name: '热红外面积',
            type: 'line',
            // min: 10,
            // max: 40,
            data: [],
            markPoint: {
              data: [
                { type: 'max', name: '最大值' },
                { type: 'min', name: '最小值' }
              ]
            },
            lineStyle: {
              normal: {
                width: 3,
                color: {
                  type: 'linear',

                  colorStops: [
                    {
                      offset: 0,
                      color: '#AAF487' // 0% 处的颜色
                    },
                    {
                      offset: 0.4,
                      color: '#47D8BE' // 100% 处的颜色
                    },
                    {
                      offset: 1,
                      color: '#47D8BE' // 100% 处的颜色
                    }
                  ],
                  globalCoord: false // 缺省为 false
                },
                shadowColor: 'rgba(71,216,190, 0.5)',
                shadowBlur: 5,
                shadowOffsetY: 3
              }
            },
            itemStyle: {
              normal: {
                color: '#AAF487',
                borderWidth: 5,
                /*shadowColor: 'rgba(72,216,191, 0.3)',
                     shadowBlur: 100,*/
                borderColor: '#AAF487'
              }
            },
            smooth: true,
            markLine: {
              data: [{ type: 'average', name: '平均值' }]
            }
          }
        ]
      },
      gaugeChart: null,
      gaugeChartOptions: {
        title: [
          {
            x: '24%',
            bottom: 10,
            text: '实时AQI',
            textStyle: {
              fontSize: 14,
              color: '#fff'
            }
          },
          {
            x: '38%',
            bottom: 1,
            text: '',
            textStyle: {
              fontSize: 12,
              color: '#fff'
            }
          },
          {
            x: '68%',
            bottom: 10,
            text: '今日AQI',
            textStyle: {
              fontSize: 14,
              color: '#fff'
            }
          }
        ],
        tooltip: {
          show: true
        },
        series: [
          {
            type: 'gauge',
            center: ['75%', '55%'], // 默认全局居中
            radius: '70%',
            min: 0,
            max: 350,
            startAngle: 200,
            endAngle: -20,
            clockwise: true,
            axisLine: {
              show: true,
              lineStyle: {
                width: 2,
                shadowBlur: 0,
                color: [[1, '#03B7C9']]
              }
            },
            axisTick: {
              show: true,
              lineStyle: {
                color: '#03B7C9',
                width: 1
              },
              length: -6,
              splitNumber: 5
            },
            splitLine: {
              show: true,
              length: -10,
              lineStyle: {
                color: '#03B7C9'
              }
            },
            axisLabel: {
              distance: -20,
              textStyle: {
                color: '#03B7C9',
                fontSize: '10',
                fontWeight: 'bold'
              }
            },
            pointer: {
              //仪表盘指针
              show: 0
            },
            detail: {
              show: false
            },
            data: [
              {
                name: '',
                value: 50
              }
            ]
          },
          {
            startAngle: 200,
            endAngle: -20,
            type: 'gauge',
            center: ['75%', '55%'], // 默认全局居中
            radius: '65%',
            min: 0,
            max: 350,
            splitNumber: 0,
            axisLine: {
              // 坐标轴线
              lineStyle: {
                color: [
                  [0.66, '#dddddd'],
                  [1, '#dddddd']
                ], // 属性lineStyle控制线条样式
                width: 3
              }
            },
            axisLabel: {
              // 坐标轴小标记
              textStyle: {
                // 属性lineStyle控制线条样式
                fontWeight: 'bolder',
                fontSize: 16,
                color: 'rgba(30,144,255,0)'
              }
            },
            splitLine: {
              // 分隔线
              length: 10, // 属性length控制线长
              lineStyle: {
                // 属性lineStyle（详见lineStyle）控制线条样式
                width: 0,
                color: '#444'
              }
            },
            pointer: {
              // 分隔线 指针
              color: '#666666',
              width: 0,
              length: 230
            },
            detail: {
              show: false
            }
          },
          {
            name: '今日AQI',
            type: 'gauge',
            startAngle: 200,
            endAngle: -20,
            radius: '60%',
            center: ['75%', '55%'], // 默认全局居中
            min: 0,
            max: 350,
            axisLine: {
              show: false,
              lineStyle: {
                width: 12,
                shadowBlur: 0,
                color: [
                  [0.14, '#096'],
                  [0.28, '#ffde33'],
                  [0.42, '#ff9933'],
                  [0.57, '#cc0033'],
                  [0.85, '#660099'],
                  [1, '#7e0023']
                ]
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false,
              length: 20
            },
            axisLabel: {
              show: false
            },
            pointer: {
              show: true,
              width: 4
            },
            detail: {
              show: true,
              offsetCenter: [0, '60%'],
              textStyle: {
                fontSize: 20,
                fontWeight: 'bold'
              }
            },
            itemStyle: {
              normal: {
                color: '#03B7C9'
              }
            },
            data: [
              {
                value: 0
              }
            ]
          },
          {
            type: 'gauge',
            center: ['30%', '55%'], // 默认全局居中
            radius: '70%',
            min: 0,
            max: 350,
            startAngle: 200,
            endAngle: -20,
            clockwise: true,
            axisLine: {
              show: true,
              lineStyle: {
                width: 2,
                shadowBlur: 0,
                color: [[1, '#03B7C9']]
              }
            },
            axisTick: {
              show: true,
              lineStyle: {
                color: '#03B7C9',
                width: 1
              },
              length: -6,
              splitNumber: 5
            },
            splitLine: {
              show: true,
              length: -10,
              lineStyle: {
                color: '#03B7C9'
              }
            },
            axisLabel: {
              distance: -20,
              textStyle: {
                color: '#03B7C9',
                fontSize: '10',
                fontWeight: 'bold'
              }
            },
            pointer: {
              //仪表盘指针
              show: 0
            },
            detail: {
              show: false
            },
            data: [
              {
                name: '',
                value: 350
              }
            ]
          },
          {
            startAngle: 200,
            endAngle: -20,
            type: 'gauge',
            center: ['30%', '55%'], // 默认全局居中
            radius: '65%',
            min: 0,
            max: 350,
            splitNumber: 0,
            axisLine: {
              // 坐标轴线
              lineStyle: {
                color: [
                  [0.66, '#dddddd'],
                  [1, '#dddddd']
                ], // 属性lineStyle控制线条样式
                width: 3
              }
            },
            axisLabel: {
              // 坐标轴小标记
              textStyle: {
                // 属性lineStyle控制线条样式
                fontWeight: 'bolder',
                fontSize: 16,
                color: 'rgba(30,144,255,0)'
              }
            },
            splitLine: {
              // 分隔线
              length: 10, // 属性length控制线长
              lineStyle: {
                // 属性lineStyle（详见lineStyle）控制线条样式
                width: 0,
                color: '#444'
              }
            },
            pointer: {
              // 分隔线 指针
              color: '#666666',
              width: 0,
              length: 230
            },
            detail: {
              show: false
            }
          },
          {
            name: '实时AQI',
            type: 'gauge',
            startAngle: 200,
            endAngle: -20,
            radius: '60%',
            center: ['30%', '55%'], // 默认全局居中
            min: 0,
            max: 350,

            axisLine: {
              show: false,
              lineStyle: {
                width: 12,
                shadowBlur: 0,
                color: [
                  [0.14, '#096'],
                  [0.28, '#ffde33'],
                  [0.42, '#ff9933'],
                  [0.57, '#cc0033'],
                  [0.85, '#660099'],
                  [1, '#7e0023']
                ]
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false,
              length: 20
            },
            axisLabel: {
              show: false
            },
            pointer: {
              show: true,
              width: 4
            },
            detail: {
              show: true,
              offsetCenter: [0, '60%'],
              textStyle: {
                fontSize: 20,
                fontWeight: 'bold'
              }
            },
            itemStyle: {
              normal: {
                color: '#03B7C9'
              }
            },
            data: [
              {
                value: 0
              }
            ]
          }
        ]
      },
      R2Chart: null,
      R2ChartOption: {
        title: {
          text: '遥感监测-矿区面积变化',

          x: 'center',
          textStyle: {
            color: '#ffffff'
          }
        },
        grid: {
          top: '25%',
          bottom: '10%'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
            label: {
              show: true
            }
          }
        },
        dataZoom: [
          {
            type: 'slider',
            show: true,
            height: 12,
            left: '10%',
            right: '10%',
            bottom: '2%',
            start: 50,
            end: 100,
            textStyle: {
              color: '#d4ffff',
              fontSize: 11
            }
          },
          {
            type: 'inside'
          }
        ],
        calculable: true,
        legend: {
          data: ['同比', '总面积'],
          top: '15%',
          textStyle: {
            color: '#ffffff'
          }
        },
        xAxis: {
          data: [],
          axisLine: {
            show: false //隐藏X轴轴线
          },
          axisTick: {
            show: false //隐藏X轴刻度
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#ebf8ac' //X轴文字颜色
            }
          }
        },
        yAxis: [
          {
            type: 'value',
            name: '总面积(K㎡)',
            nameTextStyle: {
              color: '#ebf8ac'
            },
            splitLine: {
              show: false
            },

            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisLabel: {
              show: true,
              formatter: '{value}K㎡',
              textStyle: {
                color: '#ebf8ac'
              }
            }
          },
          {
            type: 'value',
            name: '同比增加(%)',
            nameTextStyle: {
              color: '#ebf8ac'
            },
            position: 'right',

            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisLabel: {
              show: true,
              formatter: '{value} %', //右侧Y轴文字显示
              textStyle: {
                color: '#ebf8ac'
              }
            }
          },
          {
            type: 'value',
            gridIndex: 0,
            min: 50,
            max: 100,
            splitNumber: 8,
            splitLine: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false
            },
            splitArea: {
              show: true,
              areaStyle: {
                color: ['rgba(250,250,250,0.0)', 'rgba(250,250,250,0.05)']
              }
            }
          }
        ],
        series: [
          {
            name: '同比',
            type: 'line',
            yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
            smooth: true, //平滑曲线显示
            showAllSymbol: true, //显示所有图形。
            symbol: 'circle', //标记的图形为实心圆
            symbolSize: 10, //标记的大小
            itemStyle: {
              //折线拐点标志的样式
              color: '#fa704d'
            },
            lineStyle: {
              color: '#fa704d'
            },
            areaStyle: {
              color: 'rgba(5,140,255, 0.2)'
            },
            data: []
          },
          {
            name: '总面积',
            type: 'bar',
            barWidth: 15,
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#00d4c7'
                  },
                  {
                    offset: 1,
                    color: '#00d4c7'
                  }
                ])
              }
            },
            data: []
          }
        ]
      },
      R3Chart: null,
      R3ChartOption: {
        timeline: {
          data: [],
          axisType: 'category',
          autoPlay: true,
          playInterval: 3000,
          left: '10%',
          right: '10%',
          bottom: '3%',
          width: '80%',
          //  height: null,
          label: {
            normal: {
              textStyle: {
                color: '#ddd'
              }
            },
            emphasis: {
              textStyle: {
                color: '#fff'
              }
            }
          },
          symbolSize: 10,
          lineStyle: {
            color: '#555'
          },
          checkpointStyle: {
            borderColor: '#777',
            borderWidth: 2
          },
          controlStyle: {
            showNextBtn: true,
            showPrevBtn: true,
            normal: {
              color: '#666',
              borderColor: '#666'
            },
            emphasis: {
              color: '#aaa',
              borderColor: '#aaa'
            }
          }
        },
        baseOption: {
          animation: true,
          animationDuration: 1000,
          animationEasing: 'cubicInOut',
          animationDurationUpdate: 1000,
          animationEasingUpdate: 'cubicInOut',
          grid: {
            right: '1%',
            top: '15%',
            bottom: '10%',
            width: '20%'
          }
        },
        options: []
      },
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.initL1Charts();
      this.initGaugeChart();
      this.initM1Chart();
      this.initL2Charts();
      this.initR3Charts();
      this.initR2Charts();
      this.initMap();
      this.getM1ChartData();
      this.getL2ChartData();
      this.getR1ChartData();
      this.getR2ChartData();
      this.getR3ChartData();
    });
  },
  methods: {
    initMap(){
      this.map = mapOper.initBlankMap('map');
      let params = {
        map: this.map,
        center: [36402916.2801803, 4366765.13449465],
        zoom: 2.5
      };
      mapOper.ZoomAndCenter(params);
      
    },
    initL1Charts(){
      let that = this;
      
      let chartDiv = document.getElementById('grid-L1');
      that.L1Chart = that.$echarts.init(chartDiv);
      that.L1Chart.setOption(that.L1ChartOption);
      window.onresize = that.L1Chart;
    },
    initL2Charts() {
      let chartDiv = document.getElementById('grid-L2');
      this.L2Chart = this.$echarts.init(chartDiv);

      this.L2Chart.setOption(this.L2ChartOption);
      window.onresize = this.L2Chart;
    },
    initM1Chart(){
      let that = this;
      
      let chartDiv = document.getElementById('grid-L3');
      that.M1Chart = that.$echarts.init(chartDiv);
      that.M1Chart.setOption(that.M1ChartOption);
      window.onresize = that.M1Chart;
    },
    getM1ChartData(){
      let that=this;
      let listdata=[];
      //0
      listdata.push({
        name: '数据总量\n约1TB',
        category: 0,
        symbolSize: 60,
        draggable: false
      });
      //1
      listdata.push({
        name: '遥感数据',
        category: 1,
        symbolSize: 50
      });
      //2
      listdata.push({
        name: '空气\n质量监测',
        category: 1,
        symbolSize: 50
      });
      //3
      listdata.push({
        name: '企业\n排放数据',
        category: 1,
        symbolSize: 50
      });
      //4
      listdata.push({
        name: '模型\n分析预测',
        category: 1,
        symbolSize: 50
      });
      //5
      listdata.push({
        name: '解译数据',
        category: 1,
        symbolSize: 50
      });
      //6
      listdata.push({
        value: 'LandSet\n30.5GB',
        category: 2,
        symbolSize: 45
      });
      //7
      listdata.push({
        value: '高分数据\n100GB',
        category: 2,
        symbolSize: 45
      });
      //8
      listdata.push({
        value: '地热数据\n100GB',
        category: 2,
        symbolSize: 45
      });
      //9
      listdata.push({
        value: '矿区数据\n100GB',
        category: 2,
        symbolSize: 45
      });
      //10
      listdata.push({
        value: '烟囱数据\n100GB',
        category: 2,
        symbolSize: 45
      });
      //11
      listdata.push({
        value: '煤层数据\n100GB',
        category: 2,
        symbolSize: 45
      });
      
      //12
      listdata.push({
        value: '累计清洗\n约160MG',
        category: 2,
        symbolSize: 45
      });
      //13
      listdata.push({
        value: '累计清洗\n约60MG',
        category: 2,
        symbolSize: 45
      });
      //14
      listdata.push({
        value: '预测模型\n约109GB',
        category: 2,
        symbolSize: 45
      });
      //15
      listdata.push({
        value: '扩散模型\n约109GB',
        category: 2,
        symbolSize: 45
      });
      //16
      listdata.push({
        name: '其他数据',
        category: 1,
        symbolSize: 50
      });
      //17
      listdata.push({
        value: '累计收集\n约109GB',
        category: 2,
        symbolSize: 45
      });
      that.M1ChartOption.series[0].data=listdata;
      that.M1Chart.setOption(that.M1ChartOption);
      window.onresize = that.M1Chart;
    },
    getL2ChartData(){
      let params = {
        this: this,
        url: config.webapiUrl + '/datastatic/getGaoreAndRhwArea',
        successFunc: response => {
          let sortedArr = _.sortBy(response.data.data, ['year']);
          var tempyear=[];
          var gaoreList=[];
          var rhwAllList=[];
          _.forEach(sortedArr, function(value) {
            tempyear.push(value.year+'年');
            gaoreList.push(value.gaore.toFixed(2));
            rhwAllList.push(value.area.toFixed(2));
          });
         
          this.L2ChartOption.xAxis[0].data = tempyear;
          this.L2ChartOption.series[0].data = gaoreList;
          this.L2ChartOption.series[1].data = rhwAllList;
          
          this.L2Chart.setOption(this.L2ChartOption);
          window.onresize = this.L2Chart;
        }
      };
      commonOper.HttpGet(params);
    },
    getR1ChartData() {
      let that = this;

      let param = {
        this: that,
        url: 'http://106.74.0.132:4000/api/map/2?type=hour',
        data: {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        },
        successFunc: response => {
          if (response.status === 200 && response.data) {
            let wuhaiaqi = [1];
            let timestamp = '';
            console.log(response.data);
            _.forEach(response.data, function(value) {
              if (
                value.name == '中海勃湾学校' ||
                value.name == '市林业局' ||
                value.name == '聚英学校'
              ) {
                wuhaiaqi.push(value.aqi);
                timestamp = value.timestamp;
              }
            });
            let maxAqi = _.max(wuhaiaqi);
            let avgAqi = _.floor(_.mean(wuhaiaqi));
            that.gaugeChartOptions.title[1].text = timestamp;
            //今日
            that.gaugeChartOptions.series[2].data[0].value = avgAqi;
            //小时
            that.gaugeChartOptions.series[5].data[0].value = maxAqi;

            that.gaugeChart.setOption(that.gaugeChartOptions);
            window.onresize = that.gaugeChart;
            that.dayHight = maxAqi;
            that.dayLow = avgAqi;
            // // var Time = new Date(timestamp);
            that.currenttime = timestamp;
            // console.log(timestamp);
            that.addresultlayer(timestamp);
          }
        },
        failFunc: response => {
          let params = {
            this: that,
            title: '提示',
            message: '网络连接错误！' + response,
            type: 'warning'
          };
          commonOper.Notification(params);
        }
      };

      commonOper.HttpGet(param);
    },
    getR2ChartData() {
      let params = {
        this: this,
        url: config.webapiUrl + '/minechange/getAreaGroupByYear',
        successFunc: response => {
          let that = this;
          // //过滤矿区信息
          let tempyear = [];
          let arrealst = [];
          _.forEach(response.data.data, function(value) {
            tempyear.push(value.jyyear);
            arrealst.push(_.round(value.area / 1000000, 4));
          });
          let areaAllList = [];
          let preList = [];
          for (var i = 0; i < arrealst.length; i++) {
            let sums = 0;
            for (var j = 0; j <= i; j++) {
              sums += arrealst[j];
            }
            areaAllList.push(Number(sums.toFixed(2)));
          }
          preList.push(0);
          for (var k = 1; k < areaAllList.length; k++) {
            let fz = areaAllList[k] - areaAllList[k - 1];
            let pre = (fz / areaAllList[k]) * 100;
            preList.push(Number(pre.toFixed(2)));
          }
          that.R2ChartOption.xAxis.data = tempyear;
          that.R2ChartOption.series[0].data = preList;
          that.R2ChartOption.series[1].data = areaAllList;
          that.R2Chart.setOption(that.R2ChartOption);
          window.onresize = that.R2Chart;
        }
      };
      commonOper.HttpGet(params);
    },
    getR3ChartData() {
      let date = new Date();
      let year = date.getFullYear().toString();
      let month = (date.getMonth() + 1).toString();
      let day = date.getDate().toString();
      let that = this;
      let data = new FormData();
      data.append('cityName', '乌海市');
      data.append('startTime', '2010-01-01');
      data.append('endTime', year + '-' + month + '-' + day);
      data.append('dataType', 'day');
      let param = {
        this: that,
        url: config.webapiUrl + '/airQually/getHistoryAqiData',
        data: data,
        successFunc: response => {
          if (response.status === 200 && response.data.data) {
            that.localAqiData=response.data.data;
            that.resetR3Options(response.data.data);
            that.resetL1Options(response.data.data,2020);
          }
        },
        failFunc: response => {
          let params = {
            this: that,
            title: '提示',
            message: '网络连接错误！' + response,
            type: 'warning'
          };
          commonOper.Notification(params);
        }
      };
      commonOper.HttpPost(param);
    },
    resetR3Options(aqiData) {
      let that = this;
      let yeardata = [];
      let allyears = [];
      _.forEach(aqiData, function(value) {
        var unixTimestamp = new Date(value.timestamp);
        var syear = unixTimestamp.getFullYear();
        allyears.push(syear);

        yeardata.push({
          year: syear + '',
          primarypollutant: value.primarypollutant
        });
      });

      let yeararr = _.sortBy(_.uniq(allyears));
      let groupbyyear = _.groupBy(yeardata, function(o) {
        return o.year;
      });
      var voltageLevel = [];
      for (var i = 0; i < yeararr.length; i++) {
        voltageLevel.push(yeararr[i] + '年');
        //当前年的数据
        let currentdata = groupbyyear[yeararr[i]];
        //数据按主要污染物分组
        let groupbypull = _.groupBy(currentdata, function(o) {
          return o.primarypollutant;
        });

        let propArr = [];
        //用javascript的for/in循环遍历对象的属性
        for (var pro in groupbypull) {
          if (pro != '—') {
            propArr.push(pro);
          }
        }
        //Echarts数据
        let seriesData = [];
        //遍历每一项属性
        _.forEach(propArr, function(o) {
          let attrdata = groupbypull[o];
          let prevalue = 0;
          if (currentdata.length > 0) {
            prevalue = (attrdata.length / currentdata.length) * 100;
          }
          seriesData.push({ name: o, value: prevalue.toFixed(2) });
        });
        that.R3ChartOption.options.push({
          title: [
            {
              text: '乌海市' + yeararr[i] + '年主要污染物占比分析',
              left: 'center',
              textStyle: {
                color: '#fff'
              }
            }
          ],
          series: [
            {
              name: '交易额',
              type: 'pie',
              radius: ['36%', '58%'],
              center: ['50%', '49%'],
              label: {
                normal: {
                  show: true,
                  formatter: '{b} {c}%',
                  textStyle: {
                    fontSize: 14
                  },
                  position: 'outside'
                },
                emphasis: {
                  show: true
                }
              },
              labelLine: {
                normal: {
                  show: true,
                  length: 10,
                  length2: 25
                },
                emphasis: {
                  show: true
                }
              },
              color: [
                '#FF5D1D',
                '#00A1EA',
                '#03B7C9',
                '#c641f6',
                '#5ef5d4',
                '#00bcea'
              ],
              data: seriesData
            }
          ]
        });
      }
      that.R3ChartOption.timeline.data = voltageLevel;
      that.R3Chart.setOption(that.R3ChartOption);
    },
    //仪表盘
    initGaugeChart() {
      let chartDiv = document.getElementById('grid-R1');
      this.gaugeChart = this.$echarts.init(chartDiv);
      this.gaugeChart.setOption(this.gaugeChartOptions);
      window.onresize = this.gaugeChart;
    },
    initR2Charts() {
      let chartDiv = document.getElementById('grid-R2');
      this.R2Chart = this.$echarts.init(chartDiv);
      this.R2Chart.setOption(this.R2ChartOption);
      window.onresize = this.R2Chart;
    },
    initR3Charts() {
      let chartDiv = document.getElementById('grid-R3');
      this.R3Chart = this.$echarts.init(chartDiv);
      this.R3Chart.setOption(this.R3ChartOption);
      window.onresize = this.R3Chart;
    },
    resetL1Options(data,year){
      //console.log(data);
      let sortedarr = _.sortBy(data, ['timestamp']);
      //let tempdata=[];
      var clv1=0;
      var clv2=0;
      var clv3=0;
      var clv4=0;
      var xlv1=0;
      var xlv2=0;
      var xlv3=0;
      var xlv4=0;
      var qlv1=0;
      var qlv2=0;
      var qlv3=0;
      var qlv4=0;
      var dlv1=0;
      var dlv2=0;
      var dlv3=0;
      var dlv4=0;
      _.forEach(sortedarr, function(item) {
        var unixTimestamp = new Date(item.timestamp);
        var syear = unixTimestamp.getFullYear();
        var month = unixTimestamp.getMonth() + 1;
        //var day = unixTimestamp.getDate();
       
        //春季
        let temp = Number(item.aqi);
        if(syear==year){
          // item.year=syear;
          // item.month=month;
          // tempdata.push(item);
          if(month>=3&&month<=5){
            
        
            if (temp > 100 && temp <= 150) {
              clv1+=1;
            } else if (temp > 150 && temp <= 200) {
              clv2+=1;
            } else if (temp > 200 && temp <= 300) {
              clv3+=1;
            } else if (temp > 300) {
              clv4+=1;
            }
          }
          if(month>=6&&month<=8){
            //夏季
            if (temp > 100 && temp <= 150) {
              xlv1+=1;
            } else if (temp > 150 && temp <= 200) {
              xlv2+=1;
            } else if (temp > 200 && temp <= 300) {
              xlv3+=1;
            } else if (temp > 300) {
              xlv4+=1;
            }
          }
          if(month>=9&&month<=11){
            //秋季
            if (temp > 100 && temp <= 150) {
              qlv1+=1;
            } else if (temp > 150 && temp <= 200) {
              qlv2+=1;
            } else if (temp > 200 && temp <= 300) {
              qlv3+=1;
            } else if (temp > 300) {
              qlv4+=1;
            }
          }
          if(month>=12||month<=2){
            //冬季
            if (temp > 100 && temp <= 150) {
              dlv1+=1;
            } else if (temp > 150 && temp <= 200) {
              dlv2+=1;
            } else if (temp > 200 && temp <= 300) {
              dlv3+=1;
            } else if (temp > 300) {
              dlv4+=1;
            }
          }
        }
      });
      this.L1ChartOption.series[1].data=[clv1,xlv1,qlv1,dlv1];
      this.L1ChartOption.series[2].data=[clv2,xlv2,qlv2,dlv2];
      this.L1ChartOption.series[3].data=[clv3,xlv3,qlv3,dlv3];
      this.L1ChartOption.series[4].data=[clv4,xlv4,qlv4,dlv4];
      this.L1Chart.setOption(this.L1ChartOption);
      window.onresize = this.L1Chart;
    },
    onYearChange(e){
      this.resetL1Options(this.localAqiData,e.target.value);
    },
    onZhibiaoChange(e){
      this.currentzhibiao=e.target.value;
      this.addresultlayer(this.currenttime);
    },
    addresultlayer(currenttime){
      let that=this;
      console.log('currenttime',currenttime);
      this.mapTitle='乌海及周边'+this.currentzhibiao+'扩散分布--'+currenttime;
      let data = new FormData();
      data.append('zhibiao', 'pm25');
      data.append('startTime', '2019-10-31 21:00:00');
      data.append('resultType', 'realtime');
      
      //下载数据
      let params2 = {
        this: this,
        url: config.webapiUrl + '/modelresult/getLatestModelResultLayer',
        data: data,
        successFunc: response => {
          console.log(response.data.data);
          //this.$refs.timeBar.init(this.map, response.data.data);
          //加载图层
          let style = mapOper.getGeoJsonStyle('pm25style');
          let jsonData = {
            type: 'FeatureCollection',
            name: 'sydpoint',
            crs: {
              type: 'name',
              properties: { name: '' }
            },
            features: response.data.data.featrurList
          };
          let param = {
            map: that.map,
            jsonData: jsonData,
            zIndex: 17,
            style: style,
            styleFunc: function(feature) {
              let type = feature.get('hvalue');
              if (type < 35) {
                return style['lv1'];
              } else if (type <= 35 && type < 75) {
                return style['lv2'];
              } else if (type <= 75 && type < 115) {
                return style['lv3'];
              } else if (type <= 115 && type < 150) {
                return style['lv4'];
              } else if (type <= 150 && type < 250) {
                return style['lv5'];
              } else if (type <= 250 && type < 500) {
                return style['lv6'];
              }
            }
          };
          mapOper.loadGeoJsonLayerNew(param);
          that.lengedData=[{name:'<35 μg/m3',color:'#096'},{name:'<75 μg/m3',color:'#ffde33'},
            {name:'<115 μg/m3',color:'#ff9933'},{name:'<150 μg/m3',color:'#cc0033'},
            {name:'<250 μg/m3',color:'#660099'},{name:'<500 μg/m3',color:'#7e0023'}
          ];
        },
        failFunc: response => {
          let params = {
            this: this,
            title: '提示',
            message: '网络连接错误！' + response,
            type: 'warning'
          };
          commonOper.Notification(params);
        }
      };
      commonOper.HttpPost(params2);
    }
  }
};
</script>
<style scoped>
.grid-G2-Title {
  font-size: 16px;
  font-weight:600;
  color: rgb(255, 255, 255);
  text-align: center;
  background-color: rgba(0, 0, 0, 0.45);
    padding: 6px;
}
.content .ant-tag {
    border: 1px solid #00000012 !important;
}
.content .ant-card-small > .ant-card-body {
    padding: 4px !important;
}
.table {
    width: 100%;
    max-width: 100%;
}

table {
    background-color: transparent;
}
.table>tbody>tr>td, .table>tfoot>tr>td {
    padding: 12px 15px;
    border-top: 1px solid #eeeff1;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

table {
    border-collapse: collapse;
}
.table>tbody>tr>td{
  border-top: 1px solid #9999ff;
}
a {
    color: #ff9933;
}
</style>